<template>
	<view>
		<view class="flex justify-between align-center padding">
			<view class="">
				<view class="">
					当前位置：{{city}}
				</view>
				<view class="text-xxl">
					张三丰
				</view>
			</view>
			<text class="iconfont icon-a-001_tongzhi text-grey text-xxl"></text>
		</view>
		<view class="margin-sm">
			<custom-input></custom-input>
		</view>
		<swiper :indicator-dots="true" >
			<swiper-item>
				<view class="swiper-item">
					<image src="../../static/img/1.png" mode="aspectFill"></image>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item">
					<image src="../../static/img/2.png" mode="aspectFill"></image>
				</view>
			</swiper-item>
		</swiper>
		<view class="cu-list grid col-4 no-border" >
			<view 
				class="cu-item" 
				v-for="(item,index) in cateList" 
				:key="index" 
				@click="handleJobList(item)"
			>
				<view>
					<image :src="item.icon" class="gird-icon" mode="heightFix"></image>
					<!-- <view class="cu-tag badge" >
						99
					</view> -->
				</view>
				<text>{{item.name}}</text>
			</view>
			<view class="cu-item">
				<view>
					<image src="../../static/img/home_grid5.png" class="gird-icon" mode="heightFix"></image>
				</view>
				<text>更多</text>
			</view>
		</view>
		<view class="flex padding justify-between">
			<view class="text-lg text-bold">
				热门岗位
			</view>
			<view class="text-orange">
				查看更多
			</view>
		</view>
		<scroll-view scroll-x id="scroll" @scroll="handleScroll">
			<view id="wrapper" class="scroll-wrapper flex justify-between padding-sm" :style="{width:`${374*5}upx`}">
				<CompanyJobItem class="margin-right" v-for="(item,index) in newJobList" :jobdata="item" v-show="index<5"/>
			</view>
		</scroll-view>
		<view class="bar">
			<view class="dot" :style="{transform:`translateX(${move}px)`}">
				
			</view>
		</view>
		<view class="flex padding justify-between">
			<view class="text-lg text-bold">
				最新岗位
			</view>
			<view class="text-orange">
				查看更多
			</view>
		</view>
		<CompanyJobItem v-for="item in newJobList" :jobdata="item" c-type="new" />
	</view>
</template>

<script>
	import { categoryGet,jobGet } from '../../api/job';
	import CompanyJobItem from '../../components/company-job-item.vue'
	import {ID,KEY,BASE} from '../../config/index.js'
	import request from '../../utils/request.js'
	export default {
		components: {
			CompanyJobItem
		},
		data() {
			return {
				newJobList:[],
				scrollWidth:0,
				wrapperWidth:0,
				move:0,
				cateList:[]
			};
		},
		computed: {
			city() {
				return this.$store.state.loc.city 
			}
		},
		onLoad() {
			// 加载分类
			categoryGet().then(res=>{
				this.cateList = res.data.results.filter(item=>item.level==1)
			})
			// 加载岗位
			jobGet().then(res=>{
				this.newJobList = res.data.results
			})
		},
		onReady() {
			const query = uni.createSelectorQuery().in(this);
			query.select('#scroll').boundingClientRect(data => {
			  // console.log(data);
			  this.scrollWidth = data.width
			}).exec();
			query.select('#wrapper').boundingClientRect(data => {
			  // console.log(data);
			  this.wrapperWidth = data.width
			}).exec();
		},
		methods: {
			handleScroll(ev) {
				let {scrollWidth,wrapperWidth} = this
				console.log(scrollWidth,wrapperWidth);
				let max = wrapperWidth - scrollWidth
				let sLeft = ev.detail.scrollLeft
				let dotMax = 200-30
				this.move = (sLeft/max)*dotMax
			},
			handleJobList({name}){
				uni.setStorage({
					key:'cateName',
					data:name
				})
				uni.switchTab({
					url:`/pages/company/company`
				})
			}
		},
	}
</script>

<style lang="scss">
swiper{
	margin: 20upx 20upx;
}
.swiper-item{
	image{
		height: 380upx;
	}
}
.home-grid-item{
	image{
		width: 80upx;
		height: 80upx;
	}
}
.scroll-wrapper{
	// border: 1px solid red;
	// overflow: hidden;
	// white-space: nowrap;
	
}
.bar{
	width: 200px;
	height: 5px;
	margin: 20upx auto;
	background-color: #d8d8d8;
	.dot{
		width: 30px;
		height: 5px;
		background-color: orange;
	}
}
.gird-icon{
	height: 60upx;
}
</style>
